<template>
	<view>
		<scroll-view scroll-y="true"class="container">
			<view class="ling-view">
		
			</view>
			<view>
				<input @input="searchInput" class="search-input" placeholder="输入宝宝名字" />
			</view>
		
			<view v-if="filterChildList.length>0" class="children-view">
				<view @click="childClick(item)" class="children-item" v-for="(item,index) in filterChildList" :key="item.childrenId">
					<image class="children-item-head" :src="item.gender===1?'../../static/children-head-male.png':'../../static/children-head-female.png'"></image>
					<text class="children-item-name">{{item.name}}</text>
					<view class="children-item-age">{{item.month}}月</view>
				</view>
			</view>
		
			<view v-if="childList.length===0" class="children-empty">
				<image class="children-empty-img" src="../../static/children-list-empty.png"></image>
				<text>快去为宝宝测评吧</text>
				<view @click="actionClick">
					<assess-new-btn></assess-new-btn>
				</view>
			</view>
		</scroll-view>
		<uni-fab v-if="filterChildList.length>0" class="uni-fab-add" horizontal="right" vertical="bottom" @fabClick="actionClick" :popMenu="false"></uni-fab>	
	</view>

</template>

<script>
	import assessNewBtn from '../../components/assess-new-btn.vue'

	import uniFab from '@/components/uni-fab/uni-fab.vue';
	export default {
		components: {
			assessNewBtn,
			uniFab
		},
		data() {
			return {
				childList:[],
				filterChildList:[],
				theme: getApp().globalData.theme,
			}
		},

		onShow() {
			this.getChildren();
		},

		methods: {
			searchInput(event) {
				console.log(event);
				if (event.detail.value === null || event.detail.value === '') {
					this.filterChildList = this.childList;
					return;
				}
				var list = [];
				for (var index in this.childList) {
					var item = this.childList[index];
					if (item.name.indexOf(event.detail.value) != -1) {
						list.push(item);
					}
				}
				this.filterChildList = list;
			},
			childClick(child) {
				console.log(child);
				uni.navigateTo({
					url: '/pages-assess/children-detail/children-detail?name=' + child.name +
						'&gender=' + child.gender +
						'&month=' + child.month +
						'&id=' + child.childrenId +
						'&height=' + child.height +
						'&weight=' + child.weight
				})
			},

			getChildren() {
				if (this.childList.length === 0) {
					uni.showLoading({})
				}
				this.$http.request({
					method: 'POST',
					url: '/eapi/operator/children'
				}).then(res => {
					console.log(res);
					uni.hideLoading();
					if (res.code === '000000') {
						this.childList = res.data;
						this.filterChildList = res.data;
					} else {
						// uni.showToast({
						// 	title:res.msg,
						// 	icon:'none',
						// });
					}
				}).catch(err => {
					uni.hideLoading();
				})
			},

			actionClick() {
				uni.navigateTo({
					url: '/pages-assess/assess/assess-ready/assess-ready?assess=0'
				})
			},
		}
	}
</script>

<style lang="scss">
	.container{
		display: flex;
		flex-direction: column;
		background-color: #FFFFFF;
		justify-content: center;
		align-items: center;
	}

	.ling-view {
		background-color: #F7F7F7;
		height: 20rpx;
	}

	.search-input {
		margin-left: 30rpx;
		margin-right: 30rpx;
		margin-top: 30rpx;
		height: 80rpx;
		border-radius: 8rpx;
		border: 1px solid rgba(230, 230, 230, 1);
		padding-left: 28rpx;
		font-size: 24rpx;
	}

	.children-view {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin-top: 30rpx;
	}

	.children-item {
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding-bottom: 40rpx;
	}

	.children-item-head {
		width: 120rpx;
		height: 120rpx;
		border-color: $app-main-color;
		border-width: 1px;
		border-radius: 50%;
		border-style: solid;
	}

	.children-item-name {
		font-size: 28rpx;
		color: #333333;
		margin-top: 10rpx;
		width: 160rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		text-align: center;
	}

	.children-item-age {
		font-size: 20rpx;
		color: #FC7E3F;
		border-color: #FC7E3F;
		border-width: 1rpx;
		border-style: solid;
		border-radius: 8rpx;
		width: 80rpx;
		height: 32rpx;
		text-align: center;
		margin-top: 2rpx;

		display: flex;
		justify-content: center;
		align-items: center;
		
		@include app-font-color-sub();
	}

	.children-empty {
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 800rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 30rpx;
		color: #999999;
	}

	.children-empty-img {
		width: 644rpx;
		height: 400rpx;
		margin-bottom: 10rpx;
	}

	.children-action {
		width: 670rpx;
		height: 100rpx;
		background-color: #FACB2F;
		border-radius: 16rpx;
		color: #FFFFFF;
		margin-top: 20rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.uni-fab-add {
		/deep/ .uni-fab__circle {
			@include uni-fab-add();
		} 
	}
</style>
